import classnames from 'classnames'

import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import { addChannel, changeActive, delChannel } from '@/store/acitons/home'
import { useState } from 'react'
import { Channel } from '@/types/data'
import { differenceBy } from 'lodash'
type Props = {
  hide: () => void
}
const Channels = ({ hide }: Props) => {
  const { allChannel, channels, active } = useSelector(
    (state: RootState) => state.home
  )
  // 计算出推荐的频道列表
  // const recomChannel = allChannel.filter((item) => {
  //   return !channels.some((child) => child.id === item.id)
  // })

  const recomChannel = differenceBy(allChannel, channels, 'id')
  // 切换高亮
  const dispatch = useDispatch()

  // 3. 受控 编辑和完成的状态
  const [isEdit, setEdit] = useState(false)

  // 4. 删除频道
  const del = (id: number) => {
    if (channels.length <= 4) return
    // 如果删除的是高亮的部分那么 就更改redux 中的active 值为0
    if (id === active) {
      dispatch(changeActive(0))
    }
    dispatch(delChannel(id))
  }
  // 5.添加频道
  const addChannelFn = (item: Channel) => {
    dispatch(addChannel(item))
  }
  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon
          type="iconbtn_channel_close"
          onclick={() => {
            hide()
            setEdit(false)
          }}
        />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', isEdit && 'edit')}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              点击{isEdit ? '删除' : '进入'}频道
            </span>
            <span
              className="channel-item-edit"
              onClick={() => setEdit(!isEdit)}
            >
              {isEdit ? '完成' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {channels.map((item) => (
              <span
                className={classnames(
                  'channel-list-item',
                  item.id === active ? 'selected' : ''
                )}
                key={item.id}
                onClick={() => {
                  if (isEdit) return
                  dispatch(changeActive(item.id))
                  hide()
                  setEdit(false)
                }}
              >
                {item.name}
                {/* 如果id 为0 那么不渲染叉号 */}
                {item.id !== 0 && (
                  <Icon type="iconbtn_tag_close" onclick={() => del(item.id)} />
                )}
              </span>
            ))}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {recomChannel.map((item) => (
              <span
                key={item.id}
                className="channel-list-item"
                onClick={() => addChannelFn(item)}
              >
                + {item.name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
